<template>
    <div ref="monaco-editor" class="monaco-editor" style="width:445px;height: 100%;"></div>
</template>
<script>
import * as monaco from "monaco-editor";
export default {
    name: "AcMonaco",
    props: {
        opts: {
            type: Object,
            default() {
                return {};
            },
        },
        height: {
            type: Number,
            default: 300,
        },
    },
    data() {
        return {
            // 主要配置
            defaultOpts: {
                value: "", // 编辑器的值
                theme: "vs-dark", // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
                roundedSelection: true, // 右侧不显示编辑器预览框
                autoIndent: 'advanced', // 自动缩进
                automaticLayout: true, // 自动布局
                autoClosingBrackets: 'always',
                autoClosingDelete: 'always',
                colorDecorators: true,
                copyWithSyntaxHighlighting: true,
                readOnly: false,// 只读模式
                minimap: {
                    // 关闭代码缩略图
                    enabled: false, // 是否启用预览图
                },
            },
            // 编辑器对象
            monacoEditor: {},
        };
    },
    watch: {
        opts: {
            handler(newVal, oldVal) {
                this.monacoEditor.setValue(newVal.value);
            },
            deep: true,
        },
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            // 初始化container的内容，销毁之前生成的编辑器
            this.$refs["monaco-editor"].innerHTML = "";
            // 生成编辑器配置
            let editorOptions = Object.assign(this.defaultOpts, this.opts);
            // 生成编辑器对象
            this.monacoEditor = monaco.editor.create(
                this.$refs["monaco-editor"],
                editorOptions
            );
            // 编辑器内容发生改变时触发
            this.monacoEditor.onDidChangeModelContent(() => {
                this.$emit("change", this.monacoEditor.getValue());
            });
        },
        // 供父组件调用手动获取值
        getVal() {
            return this.monacoEditor.getValue();
        },
    },
};
</script>
<style scoped></style>